<template>
  <div>
    <div class="title"><image src="/static/back.svg" class="back" mode="widthFix" /></div>
    <div class="author_top">
      <div class="author_topname"><span>报道</span><i></i><p>人物志</p></div>
      <div class="author_topmain">这里是作者简介这里，是作者简介这里是作者简介这里是作者简介这里是作者简介</div>
    </div>
    <div class="au_topmore">浏览其它栏目<image src="/static/backh.svg" class="back" mode="widthFix" /></div>


    <div class="box">
      <div class="box_top">文 | 魏紫钰<span>09 otc.2018</span><p>李兰迪: 演员未满 </p><i></i></div>
      <div class="box_main">
        <p>穿着深蓝色制服上衣与红色格子裙，北京师大附中 2018 届高三学生李兰迪毕业了。很快，这场毕业典礼登上微博热门话题榜。</p>
        <image src="/static/Rectangle2.jpg" mode="widthFix" />
      </div>
    </div>

    <div class="box">
      <div class="box_top">文 | 魏紫钰<span>09 otc.2018</span><p>李兰迪: 演员未满 </p><i></i></div>
      <div class="box_main">
        <p>穿着深蓝色制服上衣与红色格子裙，北京师大附中 2018 届高三学生李兰迪毕业了。很快，这场毕业典礼登上微博热门话题榜。</p>
        <image src="/static/Rectangle2.jpg" mode="widthFix" />
      </div>
    </div>

    <div class="box">
      <div class="box_top">文 | 魏紫钰<span>09 otc.2018</span><p>李兰迪: 演员未满 </p><i></i></div>
      <div class="box_main">
        <p>穿着深蓝色制服上衣与红色格子裙，北京师大附中 2018 届高三学生李兰迪毕业了。很快，这场毕业典礼登上微博热门话题榜。</p>
        <image src="/static/Rectangle2.jpg" mode="widthFix" />
      </div>
    </div>



  </div>
</template>

<script>
export default {
  data () {
  },

  methods: {
  }
}
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.back{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }

.author_top{ width: 327px;height:auto; display: block; float:left;margin:75px 23px 8px; border:1px solid rgba(0, 0, 0, 0.15); border-top:6px solid #000000; font-size: 12px; }
.author_topimg{ width: 88px; height: 88px; border-radius: 88px; display: block; float:left; margin: -42px 119.5px 0; }
.author_topname{width: 100%;height:auto; display: block; float:left;margin:15px 0 8px;}
.author_topname span{width: 24px;height:auto; display: block; float:left;margin:10px 0 0 20px; font-size: 12px; line-height: 17px; color: rgba(0,0,0,.4);}
.author_topname i{width: 58px;height:1px; display: block; float:left;margin:20px 0 0 10px;  background: rgba(0,0,0,.1);}
.author_topname p{width: auto;height:auto; display: block; float:left;margin:0 0 0 10px; font-size: 30px; line-height: 43px; color: rgba(0,0,0,1);Font-Family: Source Han Serif}
.author_topmain{width: 291px;height:auto; display: block; float:left;margin:10px 20px 23px; font-size: 14px; line-height: 20px; color: rgba(0,0,0,.4);}
.box{width: 327px;height:auto; display: block; float:left;margin:22px 24px 10px; }
.box_top{width: 100%;height:auto; display: block; float:left;margin:0 0 16px; font-size: 12px; color: rgba(0,0,0,.6); line-height: 17px;}
.box_top span{width: auto;height:auto; display: block; float:right;}
.box_top p{width: 100%;height:auto; display: block; float:left; font-size: 24px; line-height: 34px; color: #000000; margin: 10px 0 0;}
.box_top i{width:15px;height:2px; display: block; float:left; background: #F62525; margin: 10px 0 0;}
.box_main{width: 100%;height:auto; display: block; float:left;margin:5px 0 16px; }
.box_main p{width: 100%;height:auto; display: block; float:left; font-size: 12px; line-height: 17px; color: rgba(0,0,0,.4); margin: 5px 0 15px;}
.box_main image{width: 100%;height:auto; display: block; float:left; margin: 5px 0;}
.au_topmore{width: 100%; height: 24px; display: block; float:left; font-size: 14px; line-height: 20px; color:rgba(0,0,0,.6); text-align: right; margin:18px 0;}
.au_topmore image{width: 24px;height:24px; display: block; float:right; margin: 0 40px 0 5px;}
</style>